<template>
  <div>
    <!-- 候选人管理 -->
    <div style="display: flex;justify-content: space-between;">
      <div>
        <div style="font-size: 20px;">候选人管理</div>
        <div style="font-size: 14px;margin-top: 10px;">管理所有人信息和面试安排</div>
      </div>
      <div>
        <el-button type="primary" @click="dialogFormVisible = true">+添加候选人</el-button>
      </div>
    </div>
    <el-card style="margin-bottom: 20px;">
      <!-- <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p> -->
      <div style="display: flex;justify-content: space-between;">
        <div>
          状态
          <el-select v-model="value" placeholder="请选择">
            <el-option label="选项1" value="1" />
            <el-option label="选项2" value="2" />
            <el-option label="选项3" value="3" />
          </el-select>
        </div>
        <div>
          职位
          <el-select v-model="value" placeholder="请选择">
            <el-option label="选项1" value="1" />
            <el-option label="选项2" value="2" />
            <el-option label="选项3" value="3" />
          </el-select>
        </div>
        <div>
          日期范围
          <div class="demo-date-picker">
            <div class="block">
              <el-date-picker v-model="value" type="daterange" start-placeholder="Start date" end-placeholder="End date"
                :default-time="defaultTime" />
            </div>
          </div>
        </div>
        <div>
          <!-- <el-button type="primary">搜索</el-button> -->
          <el-input v-model="input2" class="w-50 m-2" placeholder="Type something" :prefix-icon="Search" />

        </div>
      </div>

    </el-card>
    <!-- 候选人列表 -->
    <el-card style="">
      <template #header>
        <div class="card-header">
          <span>候选人列表</span>
        </div>
      </template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="候选人" width="180">
          <template #default="scope">
            <!-- <el-link type="primary"></el-link> -->
          </template>
        </el-table-column>
        <el-table-column prop="date" label="候选人" width="180" />
        <el-table-column prop="name" label="联系方式" width="180" />
        <el-table-column prop="address" label="应聘职位">

        </el-table-column>
        <el-table-column prop="address" label="申请日期">

        </el-table-column>
        <el-table-column prop="address" label="面试状态">

        </el-table-column>
        <el-table-column prop="address" label="面试结果">

        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-button :icon="Search" circle />
            <el-button type="primary" :icon="Edit" circle />
            <el-button type="danger" :icon="Delete" circle />
          </template>

        </el-table-column>
      </el-table>
      <template #footer>Footer content</template>
    </el-card>
  </div>
  <!-- 弹窗 -->
  <el-dialog v-model="dialogFormVisible" title="添加候选人">
    <el-form :model="form">
      <el-form-item label="Promotion name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang='ts' setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import { ref } from 'vue'
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const dialogFormVisible = ref(false)
const form = ref({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const formLabelWidth = ref('120px')
const input2 = ref('')
const value = ref('')
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
</script>
<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  /* padding: 30px 0; */
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}
</style>
